<template>
	<view class="phonepage">
		<view class="already-rz" v-if="show_success">
			<image src="../../static/image/rz.png"></image>
			<text>您已完实名认证</text>
		</view>
		<view class="rzinfo" v-if="!show_success">
			<form @submit="formSubmit">
				<view class="tip">请填写真实有效的姓名，支付宝提现到账才能完成</view>
				<view class="phoneitem">
					<text>
						真实姓名
					</text>
					<input name="realname" type="text" maxlength="50" placeholder="请输入真实姓名" />
				</view>
				<view class="shenming">
					必须与支付宝实名信息一致，否则无法完成实名验证
				</view>
				<button formType="submit" type="primary" class="comfir">提交</button>
			</form>
		</view>
	</view>
</template>

<script>
	/**
	 * 用户手机登陆
	 */
	export default {
		data() {
			return {
				realname: '',
				show_success: false, //实名认证是否成功
			}
		},
		methods: {
			//获取表单数据
			formSubmit(e) {
				let userinfo = uni.getStorageSync('user_info');
				let realname=e.detail.value.realname;
				if(!userinfo.alipay_user_id){
					this.$ShowMsg('您还未绑定支付宝，请前往设置绑定！');
					return;
				}
				if(!realname){
					this.$ShowMsg('请输入您的真实姓名！');
					return;
				}
				console.log(realname);
				this.$HttRequest({
					url: '/alipay/cerMember',
					param: {name:realname}
				},'POST',true).then((res) => {
					console.log(res);
					if (res.status === 10000) {
						this.$changefield('real_name',realname)
						this.$ShowMsg('实名认证成功！');
						setTimeout(()=>{
							uni.navigateBack({
								delta:1
							})
						},2500)
					} else {
						this.$ShowMsg(res.message)
					}
				}).catch((error) => {
					//异常错误
					this.$ShowMsg('statusCode：' + error.errMsg);
				})
			}
		}
	}
</script>

<style lang="scss">
	.phonepage {
		width: 95vw;
		margin: 0 auto;
		height: auto;
		display: flex;
		flex-direction: column;
		.already-rz {
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;
			image {
				width: 200rpx;
				height: 200rpx;
				margin: 50rpx 0;
				margin-bottom: 10rpx;
			}
		}

		.rzinfo {
			display: flex;
			flex-direction: column;
			height: auto;

			.tip {
				border-bottom-left-radius: 15rpx;
				border-bottom-right-radius: 15rpx;
				margin: 0 auto;
				padding: 15rpx;
				width: 96%;
				height: 65rpx;
				font-size: 28rpx;
				color: #FF454D;
				display: flex;
				justify-content: center;
				align-items: center;
				background-color: #e6e6e6;
			}

			.shenming {
				font-size: 25rpx;
				color: #6e6e6e;
				margin-top: 30rpx;
			}

			.comfir {
				width: 80%;
				height: 100rpx;
				background: linear-gradient(rgb(84, 172, 253), $uni-botton-primary);
				border: 1rpx solid #4d8feb;
				border-radius: 40rpx;
				border-radius: 40rpx;
				margin: 0rpx auto;
				display: flex;
				justify-content: center;
				align-items: center;
				color: #ffffff;
				margin-top: 150rpx;
			}

			.phoneitem {
				display: flex;
				width: 100%;
				height: 120rpx;
				border-bottom: 1px solid #e6e6e6;
				display: flex;
				align-items: center;
				font-size: 32rpx;
				.code-botton {
					background-color: $uni-botton-primary;
					border: 1rpx solid #4d8feb;
					width: 180rpx;
					height: 60rpx;
					border-radius: 40rpx;
					display: flex;
					justify-content: center;
					align-items: center;
					font-size: 25rpx;
				}

				input {
					margin-left: 15rpx;
				}
			}
		}

	}
</style>
